window.addEventListener('load', function() {
  var obj = {
    scrollItem: '.scrollItem', // 外层盒子类名
    scrollContent: '.scrollContent', // 可视区类名
    sCList: '.sCList', // 内容区类名
    barWrap: '.barWrap', // 滚动条外层类名
    barBox: '.barBox', // 滚动条内层类名
    bar: '.bar', // 滚动条滑块类名
    scrollItem_width: '300px', // 外层盒子宽度
    scrollItem_height: '450px', // 外层盒子高度
    sCList_height: '800px', // 内容区高度
    barWrap_width: '5px', // 滚动条宽度
    barWrap_bgc: 'pink', // 滚动条背景颜色，默认transparent
    bar_height: '75px', // 滑块高度
    bar_bgc: 'purple', // 滑块背景色，默认transparent
  }
  scrollFn(obj);

  function scrollFn(obj) {
    var $ = document.querySelector.bind(document);
    var log = console.log || window.console.log;

    var scrollItem = $(`${obj.scrollItem}`); // 外层盒子
    var scrollContent = $(`${obj.scrollContent}`);// 可视区
    var sCList = $(`${obj.sCList}`); // 内容区
    var barWrap = $(`${obj.barWrap}`); // 滚动条外层
    var barBox = $(`${obj.barBox}`); // 滚动条内层
    var bar = $(`${obj.bar}`); //滚动条滑块

    scrollItem.style.cssText = `position: relative; width: ${obj.scrollItem_width}; height: ${obj.scrollItem_height};`;
    scrollContent.style.cssText = 'position: relative; width: 100%; height: 100%; ';
    scrollContent.style.overflowY = 'scroll';
    sCList.style.cssText = `position: absolute; top: 0; left: 0; width: 100%; height: ${obj.sCList_height}; box-sizing: border-box;`;
    
    // ds[0].insertRule('.scrollContent::-webkit-scrollbar { width: 0 }', 0); 
    // ds[0].insertRule('.scrollContent::-webkit-scrollbar-track { background-color: transparent }', 0); 
    // ds[0].addRule('.scrollContent::-webkit-scrollbar', 'width: 0');
	  // ds[0].addRule('.scrollContent::-webkit-scrollbar-track', 'background-color: transparent');
    
    barWrap.style.cssText = `position: absolute; top: 0; right: 0; width: ${obj.barWrap_width}; height: 100%; background-color: ${obj.barWrap_bgc};`;
    barBox.style.cssText = 'position: relative; width: 100%; height: 100%;';
    bar.style.cssText = `position: absolute; top: 0; left: 0; width: 100%; height: ${obj.bar_height}; background-color: ${obj.bar_bgc};`;

    /**可视区高度 */
    var sc_h = scrollContent.offsetHeight;
    /**内容区高度 */
    var sCList_h = sCList.offsetHeight;
    /**滚动条高度 */
    var barWrap_h = barWrap.offsetHeight;
    /**滑块高度 */
    var bar_h = bar.offsetHeight;

    /**滚动最大次数 */
    var MAX_NUM ;
    /**滑块滚动的最大高度 */
    var bar_MAX_H = barWrap_h - bar_h;
    /**滚动条单次移动高度 */
    var bar_ONCE_H;
    /**滚轮向下滚动次数 */
    var times = 0;

    scrollContent.addEventListener('mousewheel', function(e) {
      MAX_NUM = Math.ceil((sCList_h - sc_h) / (Math.abs(e.deltaY)));
      bar_ONCE_H = bar_MAX_H / MAX_NUM;
      scrollRoll(e);
    })
    /**兼容FireFox */
    scrollContent.addEventListener('DOMMouseScroll', function(e) {
      scrollRoll(e);
    })
    /**兼容不同浏览器的上滚下滚定义 */
    function scrollRoll(e) {
      e = e || window.event;
      if (e.detail > 0) {
        down();
      } else if (e.detail < 0) {
        up();
      }

      if (e.wheelDelta > 0) {
        up();
      } else if (e.wheelDelta < 0) {
        down();
      }
    }
    function down(){
      if(times < MAX_NUM) {
        times++;
        // bar.style.top = times * bar_ONCE_H + 'px';
        // 滑块的运动形式做个改进
        animate(bar, bar.offsetTop, times * bar_ONCE_H);
      }
    }
    function up(){
      if(times <= MAX_NUM && times > 0) {
        times--;
        // bar.style.top = times * bar_ONCE_H + 'px';
        animate(bar, bar.offsetTop, times * bar_ONCE_H);
      }
    }
    function animate(obj, start, end, cb) { 
      function getAttr(obj) {
        return parseFloat(window.getComputedStyle(obj).top);
      }
      var _dif = getAttr(obj) - start;
      start = start == getAttr(obj) ? start : getAttr(obj);
      end = end + _dif;
      var step = (end - start) / 10;
      var n = 1;
      clearInterval(timer)
      function move() {
        obj.style.top = start + step * n + 'px';
        if(step >= 0) {
          if(obj.offsetTop >= parseInt(end)) { 
            obj.style.top = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
            clearInterval(timer);
            cb && cb();
          }
        } else if(step <= 0) {
          if(obj.offsetTop <= parseInt(end)) {
            obj.style.top = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
            clearInterval(timer);
            cb && cb();
          }
        }
        n++;
      }
      var timer = setInterval(move, 30);
    }
  }
})